<template>
  <q-page class="flex flex-center">
    <div class="ocr-id-card row">
      <div class="col flex flex-center box-content">
        <img :src="img" />
      </div>
      <div class="col column bg-grey-1">
        <q-file ref="fileField" color="purple-12" v-model="uploadField" label="选择身份证" :max-files="1" @input="fileChange">
          <template v-slot:prepend>
            <q-icon name="attach_file" />
          </template>
        </q-file>
        <q-card class="q-ma-md">
          <q-list bordered class="card-info">
            <q-item>
              <q-item-section>姓名：</q-item-section>
              <q-item-section>
                {{ idCard.name }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>性别：</q-item-section>
              <q-item-section>
                {{ idCard.sex }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>民族：</q-item-section>
              <q-item-section>
                {{ idCard.nation }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>出生：</q-item-section>
              <q-item-section>
                {{ idCard.born }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>住址：</q-item-section>
              <q-item-section>
                {{ idCard.address }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>公民身份证号码：</q-item-section>
              <q-item-section>
                {{ idCard.id }}
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>

      </div>
    </div>
  </q-page>
</template>

<script>
import { imageOcr } from 'boot/api/index';
import { pressImg } from 'components/utils/FileCompress';

export default {
  props: {},
  data() {
    return {
      uploadField: null,
      img: '',
      idCard: {
        id: '',
        name: '',
        sex: '',
        nation: '',
        address: '',
        born: '',
      },
      idCardEmpty: {
        id: '',
        name: '',
        sex: '',
        nation: '',
        address: '',
        born: '',
      },
    };
  },
  computed: {},
  methods: {
    getIdCardNum(id) {
      const regEx = /[^\d]/g;
      const x = id.indexOf('X') > -1 || id.indexOf('x') > -1 ? 'X' : '';
      const idCardNum = id.replace(regEx, '') + x;
      return idCardNum;
    },
    fileChange() {
      const startTime = new Date().getTime();
      pressImg(this.uploadField, 1, (base64) => {
        this.img = base64;
        const base64String = base64.replace('data:', '').replace(/^.+,/, '');
        imageOcr('/predict/ch_pp-ocrv3', { images: [base64String] }).then((rs) => {
          this.idCard = { ...this.idCardEmpty };
          if (rs.status === '000') {
            const { results } = rs;
            const result = results[0];
            const { data } = result;
            let all = '';
            for (let i = 0; i < data.length; i += 1) {
              const field = data[i];
              const { text } = field;
              all += text;
            }
            const idIdx = all.indexOf('公民身份号码');
            const nameIdx = all.indexOf('姓名');
            const sexIdx = all.indexOf('性别');
            const nationIdx = all.indexOf('民族');
            const bornIdx = all.indexOf('出生');
            const addressIdx = all.indexOf('住址');
            if (idIdx > -1 && nameIdx > -1 && sexIdx > -1 && nationIdx > -1 && addressIdx > -1 && bornIdx > -1) {
              this.idCard.name = all.substring(nameIdx + 2, sexIdx);
              this.idCard.sex = all.substring(sexIdx + 2, sexIdx + 3);
              this.idCard.nation = all.substring(nationIdx + 2, bornIdx);
              this.idCard.born = all.substring(bornIdx + 2, addressIdx);
              this.idCard.address = all.substring(addressIdx + 2, idIdx);
              this.idCard.id = this.getIdCardNum(all.substring(idIdx + 6, all.length));
              const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
              if (reg.test(this.idCard.id) === false) {
                this.$q.notify({
                  textColor: 'red',
                  timeout: 24 * 3600 * 1000,
                  message: `身份证号验证失败：[${all}]`,
                  position: 'top',
                });
              }
            } else {
              this.$q.notify({
                textColor: 'red',
                timeout: 24 * 3600 * 1000,
                message: `解析失败，服务器返回内容：[${all}]`,
                position: 'top',
              });
            }
            const endTime = new Date().getTime();
            this.$q.notify({
              message: `耗时：${(endTime - startTime) / 1000}秒`,
              position: 'bottom',
            });
          }
        });
      }, 600);
    },
  },
  created() { },
  mounted() {
  },
  watch: {
  },
};
</script>
<style lang="stylus">
.ocr-id-card
  width 1000px
  height 500px
  .box-content
    overflow: hidden;
    background-color: #ececec;
    img
      width 80%
      height 60%
  .card-info
    .q-item
      div:first-child
        max-width 150px !important
        padding-left 20px

</style>
